<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="js/vue.js"></script>
    <!--引入elementui-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="js/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/request1.js"></script>

</head>
<body>
<div id="app">
    <!--@select="handleSelect"-->
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">{{onlineCount}} 人在线</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
        <el-menu-item index="5" style="float: right;" @click="loginOut">
            退出登录
            <i class="el-icon-switch-button"></i>
        </el-menu-item>
        <el-menu-item index="6" style="float: right;">
            {{username}}
            <i class="el-icon-s-custom"></i>
        </el-menu-item>
    </el-menu>

    <!-- 搜索窗口 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" align="center">
        <el-form-item label="图书类型">
            <el-input v-model="formInline.type" placeholder="图书类型" clearable="clearable"></el-input>
        </el-form-item>
        <el-form-item label="书名">
            <el-input v-model="formInline.name" placeholder="书名" clearable="clearable"></el-input>
        </el-form-item>
        <el-form-item label="描述">
            <el-input v-model="formInline.description" placeholder="描 述" clearable="clearable"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSelect(formInline)">查询</el-button>
            <!--新增-->
            <el-button type="success" @click="savedialog">新增图书</el-button>
        </el-form-item>
    </el-form>


    <el-dialog title="boook新增" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="form.type" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="书名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveBook">确 定</el-button>
        </div>
    </el-dialog>

    <!--修改弹框-->
    <el-dialog title="book修改" :visible.sync="dialogUpdateVisible">
        <el-form :model="form">
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="form.type" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdateVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateBook">确 定</el-button>
        </div>
    </el-dialog>
    <!--查看弹框-->
    <el-dialog title="book查看" :visible.sync="dialogSelectVisible">
        <el-form :model="form" disabled="true">
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="form.type" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <!--          <div slot="footer" class="dialog-footer">-->
        <!--              <el-button @click="dialogUpdateVisible = false">取 消</el-button>-->
        <!--              <el-button type="primary" @click="updateBook">确 定</el-button>-->
        <!--          </div>-->
    </el-dialog>
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="概述"
                    width="400">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" @click="updateEmp(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="deleteBook(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


    </template>
</div>
</body>
<script src="js/js.cookie.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            onlineCount: 0,
            username: "",
            tableData: [{
                id: '1',
                type: '王小虎111',
                name: '上海市普陀区金沙江路 1518 弄',
                description: '1511111111'
            }],
            dialogFormVisible: false,
            dialogUpdateVisible: false,
            dialogSelectVisible: false,
            form: {
                id: "",
                type: '',
                name: '',
                description: ''
            },
            formLabelWidth: '120px',
            activeIndex: '1',
            formInline: {
                id: "",
                type: '',
                name: '',
                description: ''
            }
        },
        /*在页面被加载的时候就去请求后台*/
        mounted() {
            console.log("init....")
            /*发起请求 获取数据 把数据交给渲染层展示*/
            this.init()
            /*获取用户的登录信息*/
            // this.username = Cookies.get("username")
            this.getUserInfo();
            /*定时器获取在线人数*/
            var _this = this
            // setInterval(function () {
            //     _this.getOnlineCount()
            // }, 1000)
        },
        methods: {
            //查询全部数据
            init() {
                axios.get("/books").then(res => {
                    // console.log(res.data)
                    this.tableData = res.data.data;
                })
            },
            //获取用户信息 右上角展示用户名
            getUserInfo() {
                axios.get("/user/getUserInfo").then(res => {
                    this.username = res.data.data
                })
            },
            //获取实时在线人数
            // getOnlineCount() {
            //     axios.get("/user/getOnlineCount").then(res => {
            //         this.onlineCount = res.data.data
            //     })
            // },
            //退出登录
            loginOut() {
                axios.get("/user/loginOut").then(res => {
                    if (res.data.code == 20070) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        setInterval(function () {
                            location.href = "login.html"
                        }, 1000)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            // 条目数发生改变
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.page.pageSize = val
                this.init()
            },
            // 页码发生改变
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page.currentPage = val
                this.init()
            },
            // 打开新增弹框
            savedialog() {
                this.form = {}
                this.dialogFormVisible = true
            },
            // 查看单条数据详情
            handleClick(row) {
                console.log(row);
                this.form = row
                this.dialogSelectVisible = true
            },
            // 新增submit
            saveBook() {
                console.log(this.form)
                /*请求后台 json格式数据发送到后台*/
                axios.post("/books",
                    this.form).then(resp => {
                    /*清空form*/
                    this.form = {}
                    /*重新查询*/
                    this.init()
                    /*关闭天窗*/
                    this.dialogFormVisible = false
                    /*提示*/
                    if (resp.data.code == 20020) {
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });

                    } else {
                        this.$message.error(resp.data.msg);
                    }
                    // this.$message({
                    //     message:resp.data
                    // })
                })

            },
            // 删除
            deleteBook(val) {
                console.log(val)
                /*请求后台 删除数据 刷新页面*/
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {// 确定处理逻辑
                    //   /books/1
                    axios.delete("/books/" + val.id)
                        .then(resp => {
                            if (resp.data == "success") {
                                this.$message({
                                    message: '恭喜你，删除成功',
                                    type: 'success'
                                });
                                /*重新加载数据*/
                                this.init()
                            } else {
                                this.$message.error('删除失败');
                            }
                        })
                }).catch(() => {// 取消的处理逻辑
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 修改回显
            updateEmp(val) {
                console.log(val)
                /*控制弹框*/
                this.dialogUpdateVisible = true
                /*数据赋值*/
                var str = JSON.stringify(val)
                var data = JSON.parse(str)
                this.form = data
            },
            // 修改提交
            updateBook() {
                console.log(this.form)
                /*请求后台 json格式数据发送到后台*/
                axios.put("/books", this.form)
                    .then(res => {
                        if (res.data == "success") {
                            /*把弹框隐藏掉*/
                            this.dialogUpdateVisible = false
                            /*把form清空*/
                            this.form = {}
                            this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });
                            /*重新加载数据*/
                            this.init()
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })

            },
            // 查询submit
            onSelect() {
                console.log('submit!');
                _this = this
                axios.post("/books/getByConditions", _this.formInline).then(res => {
                    this.tableData = res.data;
                })
            }
        }
    })
</script>
</html>